
import { useEffect, useState } from "react";
import * as echarts from "echarts";
import HomePage_TableComponent from "../../../../../../components/table";
import HomePage_ModalComponent from "../../../../../../components/modal";
import modalCloseImage from "../../../../../../assets/image/icon_line_close2@2x.png";
import lessModule from "./index.module.less";

// 主页-事件统计页面-弹窗内容组件
interface dataManagementEventStatisticsPageModalContentComponentPropsInterface {
    modalData: object
    get_isModalClose: Function
}

const DataManagementPage_EventStatisticsPage_ModalContentComponent: React.FC<dataManagementEventStatisticsPageModalContentComponentPropsInterface> = (props) => {

    const parameterList = [
        [
            {
                label: "发生时间",
                key: "event_time",
            },
            {
                label: "事件时间状态",
                key: "event_time",
            },
        ],
        [
            {
                label: "事件线路",
                key: "device_name",
            },
            {
                label: "事件站点",
                key: "device_name",
            },
            {
                label: "监测点",
                key: "monitor_point",
            },
            {
                label: "事件类型",
                key: "event_type",
            }
        ]
    ]
    let echartsLine: echarts.ECharts
    const xList = Array.from({ length: props.modalData?.["error_Data"]?.["error_data"]?.length }, (v, k) => k)
    const init_echarts = () => {
        echartsLine = echarts.init(document.getElementById("echartsLine") as HTMLElement)
    }
    const draw_echarts = () => {
        const option = {
            tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(13,89,128,0.9)",
                borderColor: "#17A1E6",
                axisPointer: {
                    lineStyle: {
                        type: "solid",
                        color: "#17A1E6",
                        snap: true
                    },
                },
                formatter(params: Array<object>) {
                    return `
                            <div class="${lessModule["echartsBox-main__tooltip"]}">
                                <span>${params[0]["axisValueLabel"]}</span>
                                <div class="${lessModule["main-tooltip__row"]}">
                                    <div class="${lessModule["tooltip-row__legend"]}"></div>
                                    <div>${params[0]["data"]}</div>
                                </div>
                            </div>`;
                },
            },

            grid: {
                top: "25px",
                left: "24px",
                right: "4%",
                bottom: "5",
                containLabel: true,
            },
            xAxis: {
                type: "category",
                data: xList,
                boundaryGap: false,
                axisLabel: {
                    fontSize: 12,
                    fontWeight: 400,
                    color: "#7A8F99",
                    showMinLabel: true,
                    showMaxLabel: true,
                    align: "left",
                    formatter: (() => {
                        return (item: any, idx: any) => {
                            const isLast = idx === xList.length - 1;
                            const label = isLast ? `{last|${item}}` : item;
                            return label;
                        };
                    })(),
                    interval: 1,
                    rich: {
                        last: {
                            width: 0,
                            align: "right",
                        },
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: "#17A1E6",
                    },
                },
                axisTick: {
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.5)",
                    },
                },
            },

            yAxis: {
                type: "value",
                axisLabel: {
                    color: "#7A8F99",
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.5)",
                        width: 1,
                        type: "solid",
                    },
                },
            },
            series: [{
                data: [],
                type: "line",
                color: "#2BEDE6",
                symbol: "circle",
                showSymbol: false,
                emphasis: {
                    itemStyle: {
                        color: "#2BEDE6",
                        borderWidth: 1,
                        borderColor: "#090D0F",
                    },
                },
            }],
        };
        echartsLine.setOption(option);
    }

    const click_closeModal = () => {
        props.get_isModalClose(false)
    }
    useEffect(() => {
        init_echarts()
        draw_echarts()

    }, [])
    return (
        <div className={`${lessModule["homePageDataManagementEventStatisticsPage-dataManagementEventStatisticsPageModalContentComponent"]}`}>
            <header className={`${lessModule["homePageDataManagementEventStatisticsPage-dataManagementEventStatisticsPageModalContentComponent__header"]}`}>
                <span>事件详情</span>
                <img className={`${lessModule["dataManagementEventStatisticsPageModalContentComponent-header__closeImage"]}`} src={modalCloseImage} onClick={() => click_closeModal()} />
            </header>
            <main className={`${lessModule["homePageDataManagementEventStatisticsPage-dataManagementEventStatisticsPageModalContentComponent__main"]}`}>
                {
                    parameterList.map((item, idx) => {
                        return (
                            <div className={`${lessModule["dataManagementEventStatisticsPageModalContentComponent-main__row"]}`} key={"parameterList" + idx}>
                                {item.map((item, idx) => {
                                    return (
                                        <div className={`${lessModule["main-row__block"]}`} key={"item" + idx}>
                                            <span>{item.label}：</span>
                                            <span className={`${lessModule["row-block__value"]}`}>{props.modalData[item.key]}</span>
                                        </div>
                                    )
                                })}
                            </div>
                        )
                    })
                }
                <div className={`${lessModule["dataManagementEventStatisticsPageModalContentComponent-main__echartsBox"]}`}>
                    <div className={`${lessModule["main-echartsBox__hedear"]}`}>
                        <span>事件录波</span>
                    </div>
                    <div className={`${lessModule["main-echartsBox__main"]}`} id="echartsLine"></div>
                    <div className={`${lessModule["main-echartsBox__footer"]}`}>ms</div>
                </div>
            </main>
        </div>
    )
}

// 主页-数据管理页面-事件统计页面
const HomePage_DataManagementPage_EventStatisticsPage: React.FC = () => {
    const columnList = [
        {
            title: '序号',
            dataIndex: 'idx',
            render: (text: string, record: object, idx: number) => `${idx + 1}`,
        },
        {
            title: '发生时间',
            dataIndex: 'name',
        },
        {
            title: '线路',
            dataIndex: 'name',
        },
        {
            title: '监测点',
            dataIndex: 'name',
        },
        {
            title: '事件类型',
            dataIndex: 'name',
        },
        {
            title: '预警信息',
            dataIndex: 'name',
        },
        {
            title: '状态',
            dataIndex: 'name',
        },
        {
            title: '操作',
            align: "right",
            render: (text: string, record: object) => (
                <>
                    <span className={`${lessModule["homePageDataManagementEventStatisticsPage-tableOption"]}`} onClick={() => click_details(record)}>详情</span>
                </>
            )
        },
    ]
    const [sourceData, setSourceData] = useState<object>({ list: [{}], total: 0 })
    const [isModal, setIsModal] = useState<boolean>(false)
    const [isPrepareCloseModal, setIsPrepareCloseModal] = useState<boolean>(false)
    const [modalData, setModalData] = useState<object>({})
    let pageNo: number = 1
    let pageSize: number = 15
    let params: object = {}
    const click_details = (data: object) => {
        setIsModal(true)
        setModalData(data)
    }
    const get_isModalClose = () => {
        setIsPrepareCloseModal(true)
        setTimeout(() => {
            setIsModal(false)
            setIsPrepareCloseModal(false)
        }, 50);
    }
    const get_pagination = (no: number, size: number) => {
        pageNo = no ?? 1
        pageSize = size
        // http_eventStaticsShowAllevent()
    }

    return (
        <div className={`${lessModule["homePageDataManagementEventStatisticsPage"]}`}>
            <HomePage_TableComponent columnList={columnList} sourceData={sourceData} get_pagination={get_pagination} />
            {isModal && <HomePage_ModalComponent isPrepareCloseModal={isPrepareCloseModal} get_isModalClose={get_isModalClose} ModalContentComponents={<DataManagementPage_EventStatisticsPage_ModalContentComponent modalData={modalData} get_isModalClose={get_isModalClose} />} />}
        </div>
    )
}

export default HomePage_DataManagementPage_EventStatisticsPage